<script setup>
import {ref} from "vue";
import {useRouter} from 'vue-router'

let router = useRouter();

//菜单组件的选择事件。当用户点击ElMenu菜单中的某个菜单项时，handleSelect函数会被调用
function handleSelect(key, keyPath) {
  // 路由跳转
  router.push({path: key});
}

// 获取Carousel组件的数据
const accountManagement = ref([
  {
    path: "/manage",
    name: "个人中心"
  }, {
    path: "/InquireBooks",
    name: "查询书籍"
  }, {
    path: "/Booking",
    name: "我的预约"
  }, {
    path: "/ReturnBooks",
    name: "我要还书"
  }, {
    path: "/Chat",
    name: "智能对话"
  }]);

</script>

<template>
  <div class="header">
    <div class="img">
      <img src="@/assets/img/LogosTelegram.svg" alt="">
    </div>
    <el-menu
        mode="horizontal"
        class="el-menu-demo"
        active-text-color="#0084ff"
        @select="handleSelect"
        style="flex:1"
    >
      <el-menu-item v-for="item in accountManagement" :index="item.path">
        <span>{{ item.name }}</span>
      </el-menu-item>
    </el-menu>
  </div>

</template>

<style scoped>

.el-menu-item .is-active {
  margin-left: 5px;
  font-size: 20px;
}


.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #ea5b2c;
  border-radius: 20px;
}

.el-menu {
  background: rgba(41, 199, 190, 0.81);
  border-radius: 20px;
  padding-left: 20px;
}

.header {
  border-radius: 20px;
  opacity: 0.75;
  display: flex;
  width: 100%;
  background: rgba(53, 178, 171, 0.81);
}

.header .img img {
  height: 35px;
  padding: 10px;
}
</style>
